<template>
  <div class="carousel-container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseleave">
    <!-- 导航箭头 -->
    <!--    <button class="nav-arrow prev" @click="prevSlide">-->
    <!--      <svg style="width: 40px; height: 40px" viewBox="0 0 24 24">-->
    <!--        <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" />-->
    <!--      </svg>-->
    <!--    </button>-->

    <!-- 卡片轮播区 -->
    <div class="cards-wrapper">
      <div
        v-for="(card, index) in visibleCards"
        :key="card.id || index"
        :class="{
          card: true,
          active: index === 1,
          prev: index === 0,
          next: index === 2
        }"
        @click="handleCardClick(index)"
      >
        <slot :item="card.data" name="item">
          <div class="card-number">{{ card.number }}</div>
        </slot>
      </div>
    </div>

    <!--    <button class="nav-arrow next" @click="nextSlide">-->
    <!--      <svg style="width: 40px; height: 40px" viewBox="0 0 24 24">-->
    <!--        <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />-->
    <!--      </svg>-->
    <!--    </button>-->

    <!-- 底部指示器 -->
    <div class="indicators">
      <div
        v-for="n in totalCards"
        :key="n"
        :class="{ indicator: true, active: currentIndex + 1 === n }"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watchEffect } from 'vue'

const prop = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  interval: {
    type: Number,
    default: 3000
  },
  autoplay: {
    type: Boolean,
    default: true
  }
})
const totalCards = ref(prop.data.length || 5)
const currentIndex = ref(0)
// 计算可见卡片
const visibleCards = computed(() => {
  //
  const prevIndex = (currentIndex.value - 1 + totalCards.value) % totalCards.value
  const nextIndex = (currentIndex.value + 1) % totalCards.value

  return [
    { id: prevIndex + 1, number: prevIndex + 1, data: prop.data[prevIndex] },
    {
      id: currentIndex.value + 1,
      number: currentIndex.value + 1,
      data: prop.data[currentIndex.value]
    },
    { id: nextIndex + 1, number: nextIndex + 1, data: prop.data[nextIndex] }
  ]
})

const intervalId = ref(null)
onMounted(() => {
  if (prop.autoplay) {
    intervalId.value = setInterval(() => {
      nextSlide()
    }, prop.interval)
  }
})
watchEffect(() => {
  totalCards.value = prop.data.length
})

const handleMouseEnter = () => {
  if (prop.autoplay) clearInterval(intervalId.value)
}

const handleMouseleave = () => {
  if (prop.autoplay) {
    intervalId.value = setInterval(() => {
      nextSlide()
    }, prop.interval)
  }
}

// 切换方法
const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + totalCards.value) % totalCards.value
}

const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % totalCards.value
}

// 卡片点击处理
const handleCardClick = (index) => {
  if (index === 0) prevSlide()
  if (index === 2) nextSlide()
}
</script>

<style lang="scss" scoped>
.carousel-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.cards-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card {
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 8px;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.card.active {
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background-color: transparent;
}

.card.prev {
  left: -10%;
  transform: scale(0.9);
  opacity: 0.9;
}

.card.next {
  left: 110%;
  transform: translateX(-100%) scale(0.9);
  opacity: 0.9;
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

.nav-arrow.prev {
  z-index: 999;
  left: 20px;
  opacity: 1;
}

.nav-arrow.next {
  right: 20px;
}

.nav-arrow svg {
  width: 24px;
  height: 24px;
  fill: #5f6368;
}

/* 指示器样式 */
.indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.indicator {
  width: 24px;
  height: 3px;
  background: #e0e0e0;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #5f6368;
  width: 32px;
}
</style>
